<template>
  <div>
    <a-card style="width: 600px; height: 500px">
      <div id="main" style="width: 600px; height: 500px"></div>
    </a-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.aa();
  },
  methods: {
    aa() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "Access From",
            type: "sunburst",
            selectedMode: "single",
            radius: [0, "50%"],
            label: {
              position: "inner",
              fontSize: 12,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 100,
                name: "非物流原因",
                children: [
                  {
                    value: 50,
                    name: "不可抗力",
                  },
                  {
                    value: 30,
                    name: "或损或差",
                  },
                  {
                    value: 10,
                    name: "用户需求",
                  },
                  {
                    value: 10,
                    name: "联络不通",
                  },
                ],
              },
              {
                value: 100,
                name: "物流原因",
                children: [
                  {
                    value: 33,
                    name: "或损或差",
                  },
                  {
                    value: 33,
                    name: "资源不足",
                  },
                  {
                    value: 34,
                    name: "运力延误",
                  },
                ],
              },
              {
                value: 30,
                name: "未录入",
                children: [
                  {
                    value: 30,
                    name: "或损或差",
                  },
                ],
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
